<template>
    <div class="pages">
        <div class="search">
            <!-- <van-search background="#4674C9" @click-right-icon="searchLists" v-model="search" left-icon="" :right-icon="icon"/> -->
            <div class="search-main">
                <input type="text" class="search-key" v-model="search.key">
                <van-icon name="cross" class="search-close" v-show="search.closeShow" @click="search.key = ''"/>
                <img :src="icon.dividerIcon" class="search-divider">
                <img :src="icon.searchIcon" class="search-icon" @click="searchLists">
            </div>
            <img :src="icon.filterIcon" alt="" class="search-filter" @click="showOrHidden">
        </div>
        <van-tree-select v-model:active-id="filter.activeId" v-model:main-active-index="filter.activeIndex"
            :items="filter.items" v-if="filter.show" @click-item="filterResult" />
        <div class="lists">
            <van-pull-refresh class="pull-refresh" v-model="lists.refresh.loading" @refresh="onRefresh">
                <van-list v-model:loading="lists.more.loading" :finished="lists.more.finished" finished-text="没有更多了"
                    @load="onLoad">
                    <div class="item" @click="toDetail(item)" v-for="(item, idx) in lists.lists" :key="idx">
                        <p class="title" v-text="item.title"></p>
                        <div class="item-text" v-text="`发布部门：${item.createOrgName}`"></div>
                        <br>
                        <div class="item-text" v-text="`发布时间：${item.createTime}`"></div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue';
import { useRouter } from 'vue-router';
import searchIcon from '@/assets/imgs/workbench/wb_search.png';
import dividerIcon from '@/assets/imgs/workbench/wb_input_divider.png';
import filterIcon from '@/assets/imgs/workbench/wb_filter.png';
import { getPolicyList } from '@/api/policy';

var page = 0
var size = 12
var total = 0
const router = useRouter();
// 搜索
const icon = reactive({
    searchIcon: searchIcon,
    dividerIcon: dividerIcon,
    filterIcon: filterIcon
})
const search = reactive({
    key: '',
    closeShow: false
});
const filter = reactive({
    activeId: 1,
    activeIndex: 0,
    show: false,
    items: [
        {
            text: '类型一',
            children: [
                { text: '类型A', id: 1 },
                { text: '类型B', id: 2 },
            ],
        },
        {
            text: '类型一',
            children: [
                { text: '类型A', id: 5 },
                { text: '类型B', id: 6 },
            ],
        },
    ]
})
const searchLists = () => {
    lists.refresh.loading =true
    onRefresh()
}
const lists = reactive({
    refresh: {
        loading: false
    },
    more: {
        loading: false,
        finished: false
    },
    lists: [] as any
})
watch(search, () => {
    search.closeShow = search.key.length > 0;
})

// 下拉刷新回调
const onRefresh = () => {
    page = 0
    total = 0

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    lists.more.loading = true;
    onLoad();
}


// 加载更多回调
const onLoad = () => {
    getPolicyData()
}

const showOrHidden = () => {
    filter.show = !filter.show
}

const filterResult = (item: any) => {
    console.log(item)
    filter.show = false
}

// 跳转详情页
const toDetail = (item: any) => {
    router.push({ path: '/policy/detail', query: item })
}

const getPolicyData = async () => {
    if(total != 0 && total <= page){
        lists.more.loading = false
        lists.more.finished = true
        return
    }
    const data = await getPolicyList({
        page: page,
        size: size,
        content: search.key,
        createOrgId: '',
        title: ''
    })
    total = data.data.pages
    if (lists.refresh.loading) {
        lists.lists = [];
        lists.refresh.loading = false;
    }
    for (var i = 0; i < data.data.records.length; i++) {
        lists.lists.push(data.data.records[i]);
    }
    lists.more.loading = false;
    page++
}
</script>
<style lang="scss" scoped>
.pages {
    height: 100%;
    display: flex;
    flex-direction: column;

    .search {
        width: 100%;
        height: 52px;
        background: #4674c9;
        padding: 12px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .search-main {
            width: 100%;
            height: 100%;
            border-radius: 2.5px;
            background: white;
            display: flex;
            align-items: center;
            margin-right: 13px;

            .search-key {
                width: 100%;
                background: none;
                border: 0;
                padding: 0 12px;
            }

            .search-close {
                width: 12px;
                height: 12px;
                margin-right: 12px;
            }

            .search-divider {
                width: 0.5px;
                height: 13px;
                margin-right: 12px;
            }

            .search-icon {
                width: 12px;
                height: 12px;
                margin-right: 12px;
            }
        }

        .search-filter {
            width: 18px;
            height: 18px;
        }
    }


    .lists {
        flex: 1;
        height: 0;
        overflow-y: scroll;

        .pull-refresh {
            .van-list {
                box-sizing: border-box;
                padding: 9px;

                .item {
                    background: #ffffff;
                    border-radius: 5px;
                    box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
                    padding: 18px 16px;
                    margin-bottom: 9px;
                    position: relative;

                    &:last-child {
                        margin-bottom: 0px;
                    }

                    .title {
                        font-size: 14px;
                        font-weight: bold;
                        text-align: left;
                        color: #181818;
                        margin-bottom: 11px;
                        max-lines: 1;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }

                    .item-text {
                        font-size: 10px;
                        font-weight: bold;
                        text-align: left;
                        color: #646464;
                        margin-bottom: 6px;
                        text-align: justify;
                        text-align-last: justify;
                        display: inline-block;
                    }
                }
            }
        }
    }
}
</style>